<template>
    <div>
        <!-- 每一首歌 -->
        <div class="items" v-for="(item, index) in list" @click="getId(index)">
            <div class="index" v-if="!item.song">{{ index+1 }}</div>
            <div class="items-desc">
                <div class="items-desc-name">
                    {{ item.name }}
                    <span >{{ item.song? item.song.alias[0]:'没写' }}</span>
                </div>
                <div class="items-desc-act">
                    <span>
                        {{ item.song ? item.song.artists[0].name : item.ar[0].name }} - {{ item.song ? item.song.album.name :
                            item.al.name }}
                    </span>
                </div>
            </div>
            <div class="items-play">
                <img src="../assets/play.png" alt>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    props: ['list'],
    data() {
        return {
            
        };
    },
    methods: {
        ...mapMutations(['updataplayList','updataIndex']),
        //点击获取歌单的下标
        getId(e) {
            this.updataplayList(this.list)
            // console.log(e)
            this.updataIndex(e)
            // console.log(this.url)
            // this.$emit('getId',id)
        }
    }
};

</script>

<style lang="less" scoped>
.index{
    font-size: 15px;
    padding-right: 5px;
}
.items-desc {
    width: 85%;
}

.items-desc-name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    // background-color: pink;
    height: 50px;

    .items-play {
        width: 35px;

        img {
            width: 100%;
        }
    }
}
</style>
